<template>
  <div class="innerContainer">
    <common-title>
      <template #expand>
      </template>
    </common-title>
    <div class="innerPane">
      <div class="filterArea">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item label="文件名称">
            <el-input @keyup.enter="search" v-model="searchForm.fileName" placeholder="请输入文件名称"></el-input>
          </el-form-item>

          <el-form-item label="文件来源">
            <el-select v-model="searchForm.fileSource" placeholder="请选择文件来源">
              <el-option v-for="item in fileSourceList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button plain type="primary" @click="search">查询</el-button>
            <el-button plain @click="onClear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table ref="tableRef" :data="tableData" border row-key="mapMacCode" style="width: 100%; margin-top: 20px"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column header-align="center" type="selection" width="50" />
        <el-table-column header-align="center" type="index" label="序号" width="50" :index="indexMethod" />
        <el-table-column header-align="center" prop="fileName" label="文件名" width="160" />
        <el-table-column header-align="center" prop="fileSuffix" label="文件类型" width="120" />
        <el-table-column header-align="center" prop="fileSize" label="文件大小" width="120" />
        <el-table-column header-align="center" prop="absolutePath" label="存储路径" />
        <el-table-column header-align="center" prop="fileSource" label="文件来源" width="120">
          <template #default="{ row }">
            {{fileSourceList.find(i => i.value === row.fileSource)?.label || row.modelCode}}
          </template>
        </el-table-column>
        <el-table-column header-align="center" prop="createTime" label="上传时间" width="120" />

        <el-table-column label="操作" header-align="center" width="180" prop="col9">
          <template #default="scope">
            <el-link plain type="primary" size="small" @click="onEdit(scope.row)">编辑</el-link>

            <el-link plain type="danger" size="small" @click="onDel(scope.row)">删除</el-link>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-pagination class="pagination" :current-page="searchForm.current" :page-size="searchForm.size"
        :page-sizes="[10, 20, 30, 40]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>


</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";


import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

import {
  reqAttachList
} from "@/utils/requests";


const router = useRouter();

const tableRef = ref();

let modelList = ref([]);

// Dom 挂载之后
onMounted(async () => {
  search();
});

// 用户数据
let tableData = ref([]);

let fileSourceList = ref([
  { label: "CAD资源", value: "project_cad_source_file" },
  { label: "项目管理", value: "project_img_source_file" }
])

let total = ref(0);


/* 1. 初始值常量 */
const initialForm = () => ({
  current: 1,
  size: 10,
  fileName: "",
  fileSource: null,
})


// 搜索条件 
let searchForm = reactive(initialForm());


const indexMethod = (index) => {
  return (searchForm.current - 1) * searchForm.size + index + 1;
};

const onClear = () => {
  Object.assign(searchForm, initialForm());

  search();
};

const handleSizeChange = (size) => {
  searchForm.size = size;
  searchForm.current = 1;
  search();
};
const handleCurrentChange = (current) => {
  searchForm.current = current;
  search();
};

const search = () => {
  reqAttachList(searchForm).then((res) => {
    tableData.value = res.records;
    total.value = res.total;
  });
};

// 详情查看弹窗
const viewObj = ref();

//添加
const onAdd = () => {
  viewObj.value.openDialog(modelList.value);
};

//编辑
const onEdit = (row) => {
  let rowData = Object.assign({ _o: "w" }, row);
  viewObj.value.openDialog(modelList.value, rowData);
};

const onDel = (rowData) => {
};


defineOptions({
  name: "attachment"
})

</script>

<style scoped>
.filterArea {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.filterArea .el-select {
  width: 120px;
}

.el-table .el-link {
  margin-right: 10px;
}
</style>
